<template>
  <div>
    <h1>拼图游戏</h1>
    <div id="LineDiv" v-for="n in piecesLine" :key="n">
      <PuzzlePieces
        v-for="item in getCurrentLineItems(n - 1)"
        :key="item.id"
        :piecesValue="item.value"
        @click="clickPuzzlePieces(item)"
      />
    </div>
    <button @click="render">重置</button>
    <button @click="successFul">直接成功</button>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from "vue";
import PuzzlePieces from "./PuzzlePieces.vue";

export default defineComponent({
  components: {
    PuzzlePieces,
  },

  props: {
    title: String,
  },

  data() {
    return {
      //行数
      lineCount: 3,
      //列数
      rowCount: 3,
      items: Array(),
    };
  },
  setup() {},

  mounted() {
    this.render();
  },

  methods: {
    render() {
      //获取到总的数量
      let allSize = this.lineCount * this.rowCount;
      let newArray = new Array();
      //获取一个小于总数量数字的数组
      for (let i = 1; i < allSize; i++) {
        newArray.push({ id: i, value: i });
      }
      //随机打乱顺序
      newArray.sort(() => {
        return Math.random() - 0.5;
      });
      newArray.push({ id: allSize, value: -1 });
      this.items = newArray;
    },
    /**
     * 点击拼图块
     *
     * @param item 点击的对象
     *
     */
    clickPuzzlePieces(item: any) {
      if (item.value === -1) {
        return;
      }
      let indexOf = this.items.indexOf(item);
      if (indexOf < 0) {
        return;
      }
      let emptyIndex = this.getEmtpyIndex();
      if (emptyIndex < 0) {
        return;
      }
      if (indexOf + 1 === emptyIndex) {
        this.items[emptyIndex].value = item.value;
      } else if (indexOf - 1 === emptyIndex) {
        this.items[emptyIndex].value = item.value;
      } else if (indexOf + this.rowCount === emptyIndex) {
        this.items[emptyIndex].value = item.value;
      } else if (indexOf - this.rowCount === emptyIndex) {
        this.items[emptyIndex].value = item.value;
      } else {
        return;
      }
      this.items[indexOf].value = -1;
      let judgementResult = this.judgementResult();
      if (judgementResult) {
        alert("成功");
      }
    },
    /**
     * 获取空的坐标
     */
    getEmtpyIndex(): number {
      let length = this.items.length;
      for (let index = 0; index < length; index++) {
        if (this.items[index].value === -1) {
          return index;
        }
      }
      return -1;
    },
    /**
     * 获取当前行的数据
     */
    getCurrentLineItems(line: number): Array<any> {
      let newItems: Array<{}> = new Array();
      for (let rowIndex = 0; rowIndex < this.rowCount; rowIndex++) {
        newItems.push(this.items[line * this.rowCount + rowIndex]);
      }
      return newItems;
    },
    /**
     * 判断结果
     */
    judgementResult() {
      let length = this.items.length - 1;
      for (let index = 0; index < length; index++) {
        if (this.items[index].value !== index + 1) {
          return false;
        }
      }
      return true;
    },

    successFul() {
      //获取到总的数量
      let allSize = this.lineCount * this.rowCount;
      let newArray = new Array();
      //获取一个小于总数量数字的数组
      for (let i = 1; i < allSize - 1; i++) {
        newArray.push({ id: i, value: i });
      }
      newArray.push({ id: allSize, value: -1 });
      newArray.push({ id: allSize - 1, value: allSize - 1 });
      this.items = newArray;
    },
  },

  computed: {
    piecesLine() {
      let line = Math.floor(this.items.length / this.rowCount);
      let line2 = Math.floor(this.items.length % this.rowCount);
      if (line2 == 0) {
        return line;
      }
      return line + 1;
    },
  },
});
</script>
<style>
.box {
  background: grey;
}

#LineDiv {
  background: white;
  margin: 2px;
}
</style>
